import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
import styles from './styles';
const { width, height } = Dimensions.get('window');
// 初始化总数据

export default class Explain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
            imgW: 0,
            imgH: 0,
            thumbs: [

            ]
        };

    }
    static navigationOptions = {
        title: '竞彩足球攻略',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用
    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        // const { navigation } = this.props;
        // const detailed = navigation.getParam("detailed");
        // //this.setSize(detailed);

    }

    setSize(img) {
        Image.getSize(img, (w, h) => {//多张则循环判断处理
            console.log(w, h);
            this.setState({
                imgW: width,
                imgH: h * (width / w)
            });
            console.log(this.state.imgW, this.state.imgH);
        });

    }
    showThumb(thumb) {
        return (
            <View>
                <Image style={{ width: width, height: Image.resolveAssetSource(thumb).height * (width / Image.resolveAssetSource(thumb).width) }} source={thumb} />
            </View>
        );
    }
    render() {
        let thumb1 = require('../../image/detailed_01.jpg');
        let thumb2 = require('../../image/detailed_02.jpg');
        let thumb3 = require('../../image/detailed_03.jpg');
        let thumb4 = require('../../image/detailed_04.jpg');
        let thumb5 = require('../../image/detailed_05.jpg');
        let thumb6 = require('../../image/detailed_06.jpg');
        return (
            <View>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView>
                    {this.showThumb(thumb1)}
                    {this.showThumb(thumb2)}
                    {this.showThumb(thumb3)}
                    {this.showThumb(thumb4)}
                    {this.showThumb(thumb5)}
                    {this.showThumb(thumb6)}
                </ScrollView>
            </View>
        )
    }
}

